<!-- 制作一个3D正方体 -->
<!-- 绘制正方体的侧面图 -->
<!-- 绘制正方体六面 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">div
        <div class="item top">1</div>
      <div class="item bottom">2</div>
        <div class="item front">3</div>
        <div class="item back">4</div>
        <div class="item left">5</div>
        <div class="item right">6</div>

    </div>
</body>
<style>
    body {
        margin: 0;
        padding: 100px;
    }

    .box {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: red;
        transform-style: preserve-3d;
        transform: rotateX(-33.5deg) rotateY(45deg);
      
    }
    .top{

        background-color: rgba(255,0, 0, 0.4);
        transform: rotateX(90deg) translateZ(50px);
    }
    .bottom{

        background-color: rgba(0,255, 0, 0.4);
        transform: rotateX(-90deg) translateZ(50px);

    }
    .front{

         background-color: rgba(100,100, 100, 0.4);
        transform:  translateZ(50px);
    }
     .back{

         background-color: rgb(0, 255, 255,0.4);
        transform: rotateY(180deg) translateZ(50px);
    }
    .left{
        background-color: rgb(255, 255, 0,0.4);
 transform:rotateY(-90deg) translateZ(50px)

    }
    .right{
        background-color: rgba(255, 0, 255, 0.4);
 transform:rotateY(90deg) translateZ(50px)

    }
    .item{
        position: absolute;
        top:0;
        left: 0;
      
        height:100%;
        width: 100%;
        

    }
</style>

</html>